<!-- 模板 -->
<template>
  <button @click="flag=!flag">{{ flag ? '不显示' : '显示' }}</button>
  <h1 v-if="flag">hello v-if true</h1>

  <hr>
  <button @click="awesome = !awesome">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh n2o 👨‍🚒 👩‍🚒 🏘️ 🏚️ 🏠 🏡 🏢 🏬 🏭 💥 🧯 👮 🧨 🚒 🚓 🚔 ❤️‍🔥 🪓 📱 ☎️ 📞 🚨 🐦‍🔥 🔥 🎆 🎇 ADVERTISEMENT 😢</h1>
  <hr>
  <button @click="type='a'">a</button>
  <button @click="type='b'">b</button>
  <button @click="type='c'">c</button>
  <button @click="type='d'">d</button>
  <button @click="type='e'">e</button>
  <h3>v-if v-else-if v-else-if v-else</h3>
  <p v-if="type==='a'">a</p>
  <p v-else-if="type==='b'">b</p>
  <p v-else-if="type==='c'">c</p>
  <p v-else>no a no b no c no a/b/c</p>

  <hr>
  <h3>v-if 和 v-show</h3>
  <p v-if="flag">v-if</p>
  <p v-show="flag">v-show</p>
</template>

<!-- 脚本程序 -->
<script lang="ts" setup>
import {ref} from 'vue'

const type = ref('d')
const flag = ref(true)
const awesome = ref(true)
</script>


<!-- sass 样式，scoped 本组件使用 -->
<!-- npm install sass-loader sass --save-dev -->
<style lang="scss" scoped>

</style>
